<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">数据</BreadcrumbItem>
                <BreadcrumbItem href="#">客户数据</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <Row>
                <Col span="24">
                <span>客户公司名称：</span>
                <Input v-model="search.company" size="large" placeholder="请填写公司名称" style="width:200px;"></Input>
                <Button style="margin-left:20px;" type="primary" size="large" @click="goSearch">查询</Button>
                </Col>
            </Row>
        </Card>
        <Card style="margin-top:20px;">
            <div class="layout-content clearfix">
                <div class="layout-content-main">
                    <div class="header">
                        <Row type="flex" justify="center">
                            <Col span="24">
                            <Button type="primary" size="large">导出数据</Button>
                            <div class="filter-wrapper" style="float:right;">
                                <Button size="large" :class="{'btn-active':curTime==='today'}" @click="changeTime('today')">今天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='yesterday'}" @click="changeTime('yesterday')">昨天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='7day'}" @click="changeTime('7day')">最近7天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='30day'}" @click="changeTime('30day')">最近30天</Button>
                                <DatePicker type="daterange" :clearable="false" placement="bottom-end" placeholder="" style="width: 230px" size="large" @on-change="changeDate" v-model="search.time"></DatePicker>
                            </div>
                            </Col>
                        </Row>
                    </div>
                    <Table stripe :columns="columns" :data="data"></Table>
                    <div class="page-wrapper">
                        <Page :current="page.current" :total="page.total" :page-size="page.size" show-total @on-change="changeCur" @on-page-size-change="changeSize"></Page>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
import Config from '../../api/config';

export default {
    name: 'cusrDate',
    data() {
        return {
            search: {
                company: '',
                time: ''
            },
            page: {
                current: 1,
                total: 100,
                size: 50
            },
            curTime: 'today',
            data: [],
            columns: [
                // {
                //     title: 'ID',
                //     key: 'user_id',
                //     align: 'center'
                // },
                {
                    title: '客户名称',
                    key: 'org_name',
                    align: 'center'
                },
                {
                    title: '曝光量',
                    key: 'count_view',
                    align: 'center',
                    sortable: 'true'
                },
                {
                    title: '点击量',
                    key: 'count_click',
                    align: 'center',
                    sortable: 'true'
                },
                {
                    title: '点击率',
                    key: 'click_percent',
                    align: 'center'
                },
                {
                    title: '点击价格',
                    key: 'click_price',
                    align: 'center'
                },
                {
                    title: '总消耗',
                    key: 'consume',
                    align: 'center'
                }
            ]
        }
    },
    mounted() {
        this.search.time = this.generateTime('today');
        this._loadData();
    },
    methods: {
        _loadData() {
            let vm = this;
            let params = {
                type: 'get',
                url: 'data/customer',
                params: {
                    page: vm.page.current,
                    size: vm.page.size,
                    company: vm.search.company,
                    time: vm.search.time
                },
                sCallback(data) {
                    vm.page.current = Number(data.data.current_page);
                    vm.page.total = Number(data.data.total);
                    vm.page.size = Number(data.data.per_page);
                    vm.data = data.data.data;
                },
                eCallbakc(e) {
                    console.log(e);
                }
            };
            this.http.request(params);
        },
        generateTime(index) {
            let date = new Date();
            let today = new Date();
            let yesterday = new Date();
            let day7 = new Date();
            let day30 = new Date();
            let result = null;

            today.setTime(date.getTime());
            yesterday.setTime(date.getTime() - 24 * 60 * 60 * 1000);
            day7.setTime(date.getTime() - 6 * 24 * 60 * 60 * 1000);
            day30.setTime(date.getTime() - 29 * 24 * 60 * 60 * 1000);

            switch (index) {
                case 'today':
                    result =
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate() +
                        ' - ' +
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate();
                    break;
                case 'yesterday':
                    result =
                        yesterday.getFullYear() +
                        '-' +
                        (yesterday.getMonth() + 1) +
                        '-' +
                        yesterday.getDate() +
                        ' - ' +
                        yesterday.getFullYear() +
                        '-' +
                        (yesterday.getMonth() + 1) +
                        '-' +
                        yesterday.getDate();
                    break;
                case '7day':
                    result =
                        day7.getFullYear() +
                        '-' +
                        (day7.getMonth() + 1) +
                        '-' +
                        day7.getDate() +
                        ' - ' +
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate();
                    break;
                case '30day':
                    result =
                        day30.getFullYear() +
                        '-' +
                        (day30.getMonth() + 1) +
                        '-' +
                        day30.getDate() +
                        ' - ' +
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate();
                    break;
                default:
                    result =
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate() +
                        ' - ' +
                        today.getFullYear() +
                        '-' +
                        (today.getMonth() + 1) +
                        '-' +
                        today.getDate();
                    break;
            }
            return result;
        },
        goSearch() {
            let time = this.search.time;
            if (time.length === 2) {
                let startTime =
                    time[0].getFullYear() +
                    '-' +
                    (time[0].getMonth() + 1) +
                    '-' +
                    time[0].getDate();

                let endTime =
                    time[1].getFullYear() +
                    '-' +
                    (time[1].getMonth() + 1) +
                    '-' +
                    time[1].getDate();
                this.search.time = startTime + ' - ' + endTime;
                this._loadData();
            } else {
                this.search.time = this.search.time;
                this._loadData();
            }
        },
        changeTime(index) {
            this.curTime = index;
            this.search.time = this.generateTime(index);
            console.log(this.search.time);
            this._loadData();
        },
        changeDate(data) {
            this.search.time = data[0] + ' - ' + data[1];
            this._loadData();
        },
        changeCur(current) {
            this.page.current = current;
            this._loadData();
        },
        changeSize(pageSize) {
            this.page.size = pageSize;
            this._loadData();
        },
    excelExport() {
      let vm = this;
      let time = this.search.time;
      let startTime =
        time[0].getFullYear() +
        '-' +
        (time[0].getMonth() + 1) +
        '-' +
        time[0].getDate();

      let endTime =
        time[1].getFullYear() +
        '-' +
        (time[1].getMonth() + 1) +
        '-' +
        time[1].getDate();

      vm.search.time = startTime + ' - ' + endTime;

      window.open(
        Config.restUrl +
          'exportexcel/adData?token=' +
          vm.$store.state.token +
          '&time=' +
          vm.search.time +
          '&company=' +
          vm.search.company
      );
    }
    }
}
</script>
<style>
.btn-active {
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
}
</style>
